

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .on {
            width: 700px;
            height: 400px;
            border: 1px solid;
        }

        .side {
            width: 150px;
            background-color: aliceblue;
            list-style: none;
            line-height: 40px;
            position: fixed;
            right: 200px;
            top: 50%;
            transform: translateY(-50%);
        }

        .bran {
            width: 100%;
            height: 300px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="bran"></div>
    <div class="main">
        <div class="roll">
            <h2>楼层1</h2>
            <p class="on"></p>
        </div>
        <div class="roll">
            <h2>楼层2</h2>
            <p class="on"></p>
        </div>
        <div class="roll">
            <h2>楼层3</h2>
            <p class="on"></p>
        </div>
        <div class="roll">
            <h2>楼层4</h2>
            <p class="on"></p>
        </div>
    </div>
    <ul class="side">
        <li class="item"><a href="javascript:;"> 楼层1</a></li>
        <li class="item"><a href="javascript:;"> 楼层2</a></li>
        <li class="item"><a href="javascript:;"> 楼层3</a></li>
        <li class="item"><a href="javascript:;"> 楼层4</a></li>
    </ul>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script>
        let rolls = document.querySelectorAll('.roll')
        let items = document.querySelectorAll('.item')
        let time =null
        items.forEach(function (open, i) {
                open.addEventListener('click', function () {
                    let sh = rolls[i].offsetTop
                    let scroll=document.documentElement.scrollTop
                    // 在要去调用定时器之间 将上一个定时器清除
                    clearInterval(time)
                    time =null
                    console.log(sh,scroll);
                    if(sh>=scroll){
                        
                        time = setInterval(function(){
                            scroll+=30;
                            document.documentElement.scrollTop=scroll
                            if(Math.abs(sh-scroll) <30){
                                
                                document.documentElement.scrollTop=sh
                                console.log(document.documentElement.scrollTop);
                                clearInterval(time)
                            }
                           
                           
                        },30)
                    }
                    if(sh<scroll){
                        time = setInterval(function(){
                            scroll-=30
                            document.documentElement.scrollTop=scroll
                            if(Math.abs(sh-scroll) <30){
                                
                                document.documentElement.scrollTop=sh
                                clearInterval(time)
                            }
                            
                        },30)
                    }
                    // console.log(sh);
              
            })
        })

    </script>
</body>

</html>